<template>
	<view class="index-container">
		<view class="titleStyPOs">
			<div style="height: 50rpx;"></div>
			<Title :title="title" />
			<view class="flex-start mt-50">
				<view class="ml-35 commonSty" :class="{activeSty: current == index}" v-for="(item, index) in listTitle" @click="changeTitle(index)">
					{{item}}
				</view>
			</view>
			<view class="flex">
				<u-search placeholder="请输入搜索内容" v-model="keyword" shape="round" :clearabled="true" @search="searchFun" class="searchSty" :class="{userSearchSty: current == 0}"></u-search>
				<p v-if="current == 0" class="text-333 font-bold fz26 ml-20 mr-30" @click="userModal = true">筛选</p>
			</view>
		</view>
		<view style="height: 380rpx;"></view>
		<view v-if="current == 0" class=" w-full">
			<u-collapse  event-type="close" :arrow="true" :accordion="true" ref="height" @change="handleOpenChange">
				<u-checkbox-group>
				<u-collapse-item v-for="(item, index) in itemList" :index="index" :title="item.title" :key="index" class="collapsSty  w-full" @change="itemChange">
					<u-checkbox 
						@change="checkboxChange" 
						v-model="itemInfo.checked" 
						:key="itemInfo.id"
						:name="itemInfo.id"
						 v-for="itemInfo in item.guanzhu"
					>
					<view class="mt-30 w-full">
						<view class="flex-start boxListSty w-full">
							<!-- <image :src="ossurl+item.avatar" class="w-55 h-55 mt-30 ml-24" mode=""></image> -->
							<image src="../../../../static/icon/busiIcon.png" mode="widthFix"  class="w-55 mt-30 ml-24"></image>
							<view class="mt-30 ml-16  pb-20 w-full">
								<view class="between w-full">
									<p class="fz32 text-010 font-bold font-family" style="max-width: 540rpx;">
										{{get(itemInfo, 'member.username')}}
									</p>
									<image src="../../../../static/images/user/newUI/StarBright.png" mode="" class="w-35 h-35 mr-15" @click="cancelCollect(itemInfo)"></image>
								</view>
								
								<p>
									<span class="text-888 fz20">综合评分：{{get(itemInfo, 'member_info.rating')}} </span>
									<span class="text-888 fz20" style="margin-left: 15px;"> 已成交：{{itemInfo.order_count}}笔</span>
								</p>
								<view class="">
									<image :src="itemInfo.country=='0'?'/static/icon/zh.png':'/static/icon/ru.png'" mode=""
										class="w-30 h-20"></image>
									<span class="fz20 ml-8"
										style="color: #999">{{ get(itemInfo, 'area.mergename')}}</span>
								</view>
							</view>
						</view>
					</view>
					</u-checkbox>
					
					<view v-if="item.is_no_group != 1" class="between pb-50">
						<view class="funSty" @click="memberMove">
							成员迁移
						</view>
						<view class="funSty" @click="setReNameFun(item.id)">
							重命名
						</view> 
						<view class="funSty mr-35" @click="delGroupFun(item.id)">
							删除群组
						</view>
					</view>
					
				</u-collapse-item>
				</u-checkbox-group>
			</u-collapse>
			<view class="empty"></view>
			<view class="footer_btn4">
				<view class="btn_blue" @click="shownewGroup = true">
					新建群组
				</view>
			</view>
		</view>
		
		<view v-if="current == 1" class="">
			<view class="flex infoBoxSty" v-for="(item, index) in productList">
				<image :src="IMAGE_URL + item.goods.logo" mode="widthFix" class="w-180 mt-10 pl-10 mb-10"></image>
				<view class="flex-1">
					<p class="ml-20 mr-20 fz26 text-333 font-bold line-h40 mt-20">{{get(item, 'goods.name')}}</p>
					<view class="between mt-35 mb-20">
						<view class="flex-start ml-20">
							<p class="fz46 font-bold" style="color: #FF6600"><span class="fz26">￥</span>{{get(item, 'goods.desire_price')}}</p>
							<p class="fz20 ml-10 mt-20" style="color: #B0B0B0;">不含运费</p>
						</view>
						<image src="../../../../static/images/user/newUI/StarBright.png" mode="" class="w-35 h-35 mr-15" @click="cancelProduct(item)"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="current == 2" class="">
			<view class="flex infoBoxSty" v-for="(item, index) in storeList">
				<image :src="IMAGE_URL + item.member.avatar" mode="widthFix" class="w-180 mt-10 pl-10 mb-10"></image>
				<view class="flex-1">
					<p class="ml-20 mr-20 fz26 text-333 font-bold line-h40">{{get(item, 'member.username')}}</p>
					
					<view class="flex-start ml-20 mt-15">
						 <!-- v-for="item.member_info.rating" -->
						<image src="../../../../static/images/user/newUI/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
						<image src="../../../../static/images/user/newUI/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
						<image src="../../../../static/images/user/newUI/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
						<image src="../../../../static/images/user/newUI/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
						<image src="../../../../static/images/user/newUI/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
						<span class="fz20 text-888 ml-10" style="margin-top: -5rpx;">综合评分: 5.0</span>
					</view>
					<view class="between mt-25"> 
						<image v-if="item.member_info.country == 1" src="../../../../static/card/zh.png" mode="" class="ml-20 w-30 h-20"></image>
						<image v-else src="../../../../static/img/ru.png"  mode="" class="ml-20 w-30 h-20"></image>
						<image src="../../../../static/images/user/newUI/StarBright.png" mode="" class="w-35 h-35 mr-25" @click="cancelShop(item)"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="current == 3" class="">
			<view class="ml-40 fz22 text-333 mt-20" @click="demanModal = true">需求信息 > </view>
			<view class="bg-white ml-24 mr-24 mt-20 rounded-20" v-for="item in infoList">
				<view class="boxInfoSty">
					<view class="between pt-25">
						<p class="titleSty">服务类型</p>
						<image src="../../../../static/images/user/newUI/StarBright.png" mode="" class="w-35 h-35 mr-30"></image>
					</view>
					<p class="text-888 fz24 mt-25 ml-25">{{item.serviceKind}}</p>
				</view>
				<view class="ml-24 pt-25 boxInfoSty">
					<p class="titleSty">服务项目</p>
					<p class="text-888 fz24 mt-25 ml-25">{{item.serviceProject}}</p>
				</view>
				<view class="ml-24 pt-25 pb-35">
					<p class="titleSty">经营项目</p>
					<p class="text-888 fz24 mt-25 ml-25">{{item.operateProject}}</p>
				</view>
			</view>
		</view>
		
		<u-select v-model="demanModal" :list="list"></u-select>
		<!-- <u-popup v-model="demanModal">
			<view>
				<u-select :list="list"></u-select>
			</view>
		</u-popup> -->
		<u-modal
			v-model="shownewGroup"
			:mask-close-able="false"
			@cancel="shownewGroup = false"
			@confirm="confirmGroup"
			title="群组名"
			:show-cancel-button="true"
			class="groupSty"
		>
			<view class="slot-content">
				<u-input v-model="groupName" :border="true" type="text" />
			</view>
		</u-modal>
		
		<u-modal
			v-model="reNewName"
			:mask-close-able="false"
			@cancel="reNewName = false"
			@confirm="setNewName"
			title="重命名"
			:show-cancel-button="true"
			class="groupSty"
		>
			<view class="slot-content">
				<u-input v-model="newName" :border="true" type="text" />
			</view>
		</u-modal>
		
		<u-modal
			v-model="migrateModal"
			:mask-close-able="false"
			@cancel="migrateModal = false"
			@confirm="confirmMigrate"
			title="迁移至"
			:show-cancel-button="true"
			class="migraSty"
		>
			<view class="slot-content">
				<u-radio-group v-model="valueMigrate" :wrap="true" class="mt-10 center flex-col">
					<u-radio 
						v-for="item in migrateList" :key="item.id" 
						:name="item.id"
						class="mt-30"
					>
						{{item.title}}
					</u-radio>
				</u-radio-group>
			</view>
		</u-modal>
		
		<u-modal
			v-model="delGroup"
			:mask-close-able="false"
			:show-confirm-button="false"
			:show-cancel-button="false"
			:show-title="false"
			class="groupSty"
		>
			<view class="slot-content flex-col center">
				<view class="delConfirmSty" @click="confirmDel">
					迁移群成员并删除群组
				</view>
				<view class="delCancelSty" @click="delGroup = false">
					取消
				</view>
			</view>
		</u-modal>
		
		<u-select v-model="userModal" :list="userList" value-name="identity_type" label-name="title" @confirm="filterUser"></u-select>
	</view>
	
</template>

<script>
	import Title from './../components/title.vue'
	import { userGroup, findGroup, delGroup, editGroup, addGroup, groupMove, identityType, getGuanZhu } from '@/api/user'
	export default {
		components: {
			Title
		}, 
		data() {
			return {
				title: '我的收藏',
				reNewName: false,
				shownewGroup: false,
				delGroup: false,
				userModal: false,
				demanModal: false,
				migrateModal: false,
				valueMigrate: '',
				newName: '',
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				resetId: '',
				groupName: '',
				migrateList: [],
				userList: [],
				list: [
					{
						value: '1',
						label: '采购信息'
					},
					{
						value: '2',
						label: '需求信息'
					},
					{
						value: '3',
						label: '运输信息'
					},
					{
						value: '4',
						label: '生活广告'
					},
					{
						value: '5',
						label: '代办信息'
					}
				],
				listTitle: ['用户', '商品', '店铺'],
				current: 0,
				checkedList: [],
				keyword: '',
				checkKey: '',
				infoList: [
					{
						serviceKind: '导游服务',
						serviceProject: '莫斯科当地导游服务',
						operateProject: '莫斯科当地导游服务'
					},
					{
						serviceKind: '导游服务',
						serviceProject: '莫斯科当地导游服务',
						operateProject: '莫斯科当地导游服务'
					},
					{
						serviceKind: '导游服务',
						serviceProject: '莫斯科当地导游服务',
						operateProject: '莫斯科当地导游服务'
					},
				],
				productList: [],
				storeList: [],
				itemList: []
			}
		},
		mounted() {
			this.getList()
			this.getIdentityType()
		},
		methods: {
			getIdentityType() {
				const that = this;
				that.$u.api.user.identityType().then(res => {
					this.userList = res
				})
			},
			cancelCollect(info) {
				uni.showLoading({
					title: '取消中'
				});
				this.$u.api.user.getGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: info.guanzhu_id,
					type: 1,
					release_type: 'user',
					group_id: info.groupId
				}).then(res => {
					if(res == 1) {
						uni.$u.toast('取消成功')
						this.getList()
					}
					uni.hideLoading()
				})
				console.log('info----', info)
			},
			cancelProduct(info) {
				console.log('info----', info)
				uni.showLoading({
					title: '取消中'
				});
				this.$u.api.user.getGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: info.goods.id,
					type: 5,
					release_type: 'goods',
					group_id: info.group_id
				}).then(res => {
					if(res == 1) {
						uni.$u.toast('取消成功')
						this.getList()
					}
					uni.hideLoading()
				})
			},
			cancelShop(info) {
				console.log('info----', info)
				uni.showLoading({
					title: '取消中'
				});
				this.$u.api.user.getGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: info.guanzhu_id,
					type: 4,
					release_type: 'shop',
					group_id: info.group_id
				}).then(res => {
					if(res == 1) {
						uni.$u.toast('取消成功')
						this.getList()
					}
					uni.hideLoading()
				})
			},
			getList() {
				uni.showLoading({
					title: '获取中'
				});
				const that = this;
				that.$u.api.user.userGroup({
					user_id: uni.getStorageSync("user_id"),
					type: this.current + 1
				}).then(res => {
					console.log('99990----', res)
					if (this.current == 0) {
						this.itemList = res
						res.map(item => {
							this.migrateList.push({
								id: item.id,
								title: item.title
							})
						})
					} else if(this.current == 1) {
						this.productList = res
					} else if(this.current == 2) {
						this.storeList = res
					}
					uni.hideLoading()
				})
			},
			changeTitle(index) {
				this.current = index
				this.getList()
			},
			itemChange() {
				
			},
			searchFun() {
				const that = this;
				that.$u.api.user.userGroup({
					user_id: uni.getStorageSync("user_id"),
					type: this.current + 1,
					keyword: this.keyword
				}).then(res => {
					console.log('99990----', res)
					if (this.current == 0) {
						this.itemList = res
						res.map(item => {
							this.migrateList.push({
								id: item.id,
								title: item.title
							})
						})
					} else if(this.current == 1) {
						this.productList = res
					} else if(this.current == 2) {
						this.storeList = res
					}
				})
				
			},
			memberMove() {
				if (this.checkedList.length > 0) {
					this.migrateModal = true
				} else {
					uni.$u.toast('请选择需要迁移的成员')
				}
			},
			checkboxChange (e) {
				console.log('e----', e)
				if (e.value == true) {
					this.checkedList.push(e.name)
				} else {
					this.checkedList = this.checkedList.filter(item => item !== e.name)
				}
				console.log('9-===1', this.checkedList)
			},
			confirmGroup() {
				const that = this;
				that.$u.api.user.addGroup({user_id: uni.getStorageSync("user_id"), title: this.groupName}).then(res => {
					if (res == '200') {
						uni.$u.toast('添加成功')
						this.getList()
						this.shownewGroup = false
					}
				})
			},
			confirmMigrate() {
				if(!this.valueMigrate) {
					this.migrateModal = true
					uni.$u.toast('请选择迁移到何处')
				} else{
					const that = this;
					that.$u.api.user.groupMove({
						user_id: uni.getStorageSync("user_id"),
						ids: this.checkedList.join(','),
						group_id: this.valueMigrate
					}).then(res => {
						if (res == '200') {
							uni.$u.toast('迁移成功')
							this.getList()
							this.migrateModal = false
						}
					})
				}
			},
			filterUser(e) {
				console.log('88888', e)
				const that = this;
				that.$u.api.user.userGroup({
					user_id: uni.getStorageSync("user_id"),
					identity_type: e[0].value
				}).then(res => {
					console.log('99990----', res)
					this.itemList = res
					res.map(item => {
						this.migrateList.push({
							id: item.id,
							title: item.title
						})
					})
					console.log('0======', this.migrateList)
				})
			},
			//计算面板高度
			handleOpenChange() {
				this.$nextTick(() => {
				    this.$refs.height.init()
			  })
			},
			setReNameFun(id) {
				this.resetId = id
				const that = this;
				that.$u.api.user.findGroup({id: id}).then(res => {
					this.newName = res.title
					this.reNewName = true
				})
			},
			delGroupFun(id) {
				this.delId = id
				this.delGroup = true
			},
			confirmDel() {
				const that = this;
				that.$u.api.user.delGroup({id: this.delId}).then(res => {
					if (res == '200') {
						uni.$u.toast('删除成功')
						this.getList()
						this.delGroup = false
					}
				})
			},
			setNewName() {
				const that = this;
				that.$u.api.user.editGroup({user_id: uni.getStorageSync("user_id"), title: this.newName, id: this.resetId}).then(res => {
					if (res == '200') {
						uni.$u.toast('修改成功')
						this.getList()
						this.reNewName = false
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F6F7FB;
	}
	.boxInfoSty {
		margin-left: 24rpx;
		margin-right: 24rpx;
		min-height: 132rpx;
		border-bottom: 1rpx solid #E3E3E3;
	}
	.titleSty {
		font-family: PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		letter-spacing: 0px;
		color: #000;
		height: 26rpx;
		width: 130rpx;
		text-align: center;
		line-height: 26rpx;
		border-left: 4rpx solid #278AFF;
	}
	.index-container {
		width: 100%;
		height: 100%;
		z-index: 60;
		overflow: scroll;
		/deep/ .u-checkbox {
			width: 100% !important;
		}
		/deep/ .u-checkbox__label {
			width: 100% !important;
		}
	}
	.titleStyPOs {
		background: #F6F7FB url("/static/backcolorImg.png") no-repeat top / 100%;
		position: fixed;
		width: 100%;
		z-index: 10;
	}
	.infoBoxSty {
		background-color: #fff;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	.commonSty {
		color: #979CAA;
		font-family: PingFang SC;
		font-size: 32rpx;
		line-height: 32rpx;
		letter-spacing: 0px;
		height: 60rpx;
	}
	.activeSty {
		font-family: PingFang SC;
		font-weight: 600;
		font-size: 50rpx;
		letter-spacing: 0px;
		color: #000;
		border-bottom: 5rpx solid #4BB0FF;
	}
	.userSearchSty {
		/deep/ .u-action {
			right: 120rpx !important;
		}
	}
	.searchSty {
		width: 95% !important;
		display: flex;
		margin-left: 26rpx !important;
		margin-top: 26rpx !important;
		margin-bottom: 30rpx !important;
		/deep/ .u-content {
			background-color: #fff !important;
			height: 78rpx !important;
			position: relative;
			z-index: 2;
		}
		/deep/ .u-input {
			background-color: #fff !important;
		}
		/deep/ .u-icon__icon {
			color: #74C2FF !important;
		}
		/deep/ .u-action {
			width: 110rpx !important;
			height: 50rpx !important;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%) !important;
			text-align: center;
			line-height: 50rpx;
			font-family: PingFang SC;
			color: #fff;
			font-weight: 500;
			font-size: 26rpx;
			letter-spacing: 0px;
			border-radius: 500rpx;
			position: absolute;
			z-index: 10;
			right: 20rpx;
		}
	}
	.collapsSty {
		width: 100%;
		// min-height: 70rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		background-color: #fff;
		border-radius: 18rpx;
		margin-top: 16rpx;
		/deep/ .u-collapse-head {
			padding: 34rpx 28rpx !important;
		}
		/deep/ .u-collapse-title {
			color: #0E0E0E;
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
		}
		/deep/ .u-collapse-body {
		}
		/deep/ .u-collapse-content {
			margin-left: 40rpx;
		}
		/deep/ .u-collapse-body {
			// height: 100% !important;
		}
	}
	.boxListSty {
		width: 100%;
		flex-shrink: 0;
		border-radius: 30rpx;
		background: #FFF;
		margin: 16rpx auto;
	}
	.funSty {
		width: 186rpx;
		height: 66rpx;
		background: #F6F7FB;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 66rpx;
		letter-spacing: 0px;
		color: #8C8C8C;
		border-radius: 500rpx;
		text-align: center;
	}
	.empty {
		width: 100%;
		height: 200rpx;
	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.groupSty {
		/deep/ .u-input {
			width: 90%;
			margin: 50rpx auto;
			background-color: #F4F7FF !important;
			border-radius: 18rpx;
			border: 1rpx solid #E0E9FF !important;
		}
		/deep/ .u-model__title  {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 34rpx !important;
			letter-spacing: 0px;
			color: #1D1D1D !important;
		}
		/deep/ .u-border-top {
			border: none !important;
		}
		/deep/ .u-model__footer__button {
			width: 45% !important;
			height: 70rpx !important;
			line-height: 70rpx;
			border-radius: 500rpx;
			background-color: #F7F7F7;
			color: #333 !important;
		}
		/deep/ .hairline-left {
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			margin-left: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			letter-spacing: 0px;
			color: #fff !important;
		}
		/deep/ .u-model__footer__button {
			flex: 1 !important;
		}
		/deep/ .u-model__footer {
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			margin-left: 30rpx ;
			margin-right: 30rpx;
		}
		/deep/ .u-mode-center-box {
			border-radius: 36rpx !important;
		}
		/deep/ .u-border-top {
			position: static !important; 
		}
	}
	.migraSty {
		/deep/ .u-radio-group {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		/deep/ .u-radio {
			justify-content: center !important; 
		}
		/deep/ .u-model__footer__button {
			width: 45% !important;
			height: 70rpx !important;
			line-height: 70rpx;
			border-radius: 500rpx;
			background-color: #F7F7F7;
			color: #333 !important;
		}
		/deep/ .hairline-left {
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			margin-left: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			letter-spacing: 0px;
			color: #fff !important;
		}
		/deep/ .u-model__footer__button {
			flex: 1 !important;
		}
		/deep/ .u-model__footer {
			display: flex;
			justify-content: center;
			margin: 30rpx;
		}
		/deep/ .u-border-top {
			border: none !important;
		}
		/deep/ .u-model__title {
			color: #1D1D1D;
			font-size: 34rpx;
			font-weight: 600;
		}
	}
	.delConfirmSty {
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		width: 80%;
		height: 76rpx;
		line-height: 76rpx;
		box-shadow: 0px 4px 13.8px 0px #DEE1EF;
		box-shadow: -2px -6px 9.9px 0px #71D0FF inset;
		box-shadow: -3px 4px 5.5px 0px #C8FBFF75 inset;
		border-radius: 500rpx;
		font-family: PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		margin-top: 65rpx;
	}
	.delCancelSty {
		width: 80%;
		height: 76rpx;
		line-height: 76rpx;
		background-color: #F7F7F7;
		font-family: PingFang SC;
		font-size: 30rpx;
		letter-spacing: 0px;
		color: #333;
		margin-top: 34rpx;
		border-radius: 500rpx;
		text-align: center;
		margin-bottom: 65rpx;
	}
</style>
